<template>
	<div class="collect">
		<!-- 导航栏 -->
		<Myheader
			title="我的收藏"
			:show="true"
			@right="
				$router.push({
					name: 'index',
					query: {
						id: $route.query.id,
					},
				})
			"
		></Myheader>
		<!-- 展示页面 -->
		<div class="list">
			<van-swipe-cell v-for="item in collectList" :key="item.id">
				<Mypost :post="item"></Mypost>
				<template #right>
					<van-button square type="danger" text="删除" class="del" @click="delFn(item.id)" />
				</template>
			</van-swipe-cell>
		</div>

		<van-empty description="空空如也" v-if="collectList.length === 0" />
	</div>
</template>

<script>
import {collectListAPI} from "@/apis/user";
import {collectarticleAPI} from "@/apis/News";
import Myheader from "@/components/Myheader.vue";
import Mypost from "@/components/Mypost.vue";
export default {
	data() {
		return {
			collectList: [],
		};
	},
	components: {
		Myheader,
		Mypost,
	},
	async created() {
		const res = await collectListAPI();
		// console.log(res.data.data);
		this.collectList = res.data.data.map((item) => {
			return {
				...item,
				// 后端数据很坑换了名字的时候 自己返回自己需要的名字
				comment_length: item.comments.length,
				// 由于我的收藏页和首页评论的字段名不一样，需要我们自己处理
			};
		});
		// console.log(this.collectList);
	},
	methods: {
		// 删除收藏文章
		delFn(id) {
			// 弹窗确认
			this.$dialog
				.confirm({
					title: "是否删除当前收藏文章",
				})
				.then(async () => {
					// on confirm
					//数据的更新
					//  2. 请求发送 - 后端删除
					const res = await collectarticleAPI(id);
					console.log(res.data);

					// 视图的更新
					// 用户点击了确定
					//  1. 界面展示 - 删除DOM节点
					this.collectList = this.collectList.filter((item) => {
						return item.id !== id;
					});
					//轻提示
					this.$toast(res.data.message);
				})
				.catch(() => {
					// on cancel
				});
		},
	},
};
</script>

<style lang="less" scoped>
.del {
	height: 100%;
}
</style>
